<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>parallax effect</h1> <div id="del1" class="delayed-section" data-scrub="0.4"> <div class="innerContainer"> <img width="575" src="https://picsum.photos/575/745?index=1" alt=""> </div> </div> <div id="del2" class="delayed-section" data-scrub="0.2"> <div class="innerContainer"> <img width="575" src="https://picsum.photos/575/745?index=2" alt=""> </div> </div> <div id="del3" class="delayed-section" data-scrub="0.6"> <div class="innerContainer"> <img width="575" src="https://picsum.photos/575/745?index=3" alt=""> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script> <script src="https://assets.codepen.io/16327/ScrollTrigger.min.js?v=55"></script> <script> const delSections = document.querySelectorAll(".delayed-section"); delSections.forEach(section => { const containerAnim = gsap.to(section.querySelector(".innerContainer"), { y: "100vh", ease: "none" }); const imageAnim = gsap.to(section.querySelector("img"), { y: "-100vh", ease: "none", paused: true }); const scrub = gsap.to(imageAnim, { progress: 1, paused: true, ease: "power3", duration: parseFloat(section.dataset.scrub) || 0.1, overwrite: true }); ScrollTrigger.create({ animation: containerAnim, scrub: true, trigger: section, start: "top bottom", end: "bottom top", onUpdate: self => { scrub.vars.progress = self.progress; scrub.invalidate().restart(); } }); }); </script>

@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap'); body { font-family: "Signika Negative", sans-serif; font-weight: 300; height: 400vh; text-align: center } .delayed-section { position: absolute; width: 30vw; height: 38.87vw; } .delayed-section .inner-container { will-change: transform; } .delayed-section img { max-width: 100%; will-change: transform; } #del1 { top: 101vh; left: 10vw; } #del2 { top: 110vh; left: 60vw; } #del3 { top: 120vh; left: 30vw; }